<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-10-21 15:32:48
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-10-30 09:33:11
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-10-21 15:32:48
-->
<template>
  <div :class="classNames" :style="sizeStyle">
    <image
      class="arco-image-img"
      :src="src"
      :style="sizeStyle"
      :mode="mode"
      @load="onImgLoaded"
      @error="onImgLoadError"
      @click="onImgClick"
    ></image>

    <div v-if="!isLoaded" :class="`${prefixCls}-overlay`">
      <slot v-if="isError" name="error">
        <div :class="`${prefixCls}-error`">
          <div :class="`${prefixCls}-error-icon`">
            <slot name="error-icon">
              <aIcon name="tupiancuowu"></aIcon>
            </slot>
          </div>
          <div v-if="alt" :class="`${prefixCls}-error-alt`">
            {{ alt }}
          </div>
        </div>
      </slot>

      <slot v-if="isLoading" name="loader">
        <div :class="[`${prefixCls}-loader`]">
          <div :class="`${prefixCls}-loader-spin`">
            <aIcon name="loading" spin></aIcon>
            <div :class="`${prefixCls}-loader-spin-text`">
              <!-- {{ t("image.loading") }} -->
              加载中
            </div>
          </div>
        </div>
      </slot>
    </div>
    <!-- v-bind="previewProps" -->
    <!-- @close="onPreviewClose" -->
    <ImagePreview
      v-if="isLoaded && mergePreview"
      :src="src"
      v-bind="previewProps"
      :visible="mergedPreviewVisible"
      @close="onPreviewClose"
    >
      <template #actions>
        <slot name="preview-actions" />
      </template>
    </ImagePreview>
  </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  getCurrentInstance,
  inject,
  reactive,
  ref,
  toRefs,
  watchEffect,
} from "vue";
import { useImageLoadStatus } from "./hooks/use-image-load-status";
import aIcon from "../arco-icon/index.vue";
import ImagePreview from "../arco-image-group/image-preview.vue";
import { props } from "./props";
import useMergeState from "@/ArcoUni/hook/use-merge-state";
import { PreviewGroupInjectionKey } from "../arco-image-group/context";
const Switch = defineComponent({
  name: "SwitcH",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  components: {
    aIcon,
    ImagePreview,
  },
  props,
  emits: ["update:previewVisible", "preview-visible-change"],
  setup(props, { emit }) {
    const {
      height,
      width,
      src,
      preview,
      defaultPreviewVisible,
      previewVisible,
      previewProps,
    } = toRefs(props);

    const prefixCls = "arco-image";
    const visible = ref(true);
    const groupContext = inject(PreviewGroupInjectionKey, undefined);

    const Instance = getCurrentInstance() as any;

    const { isLoaded, isError, isLoading, setLoadStatus } =
      useImageLoadStatus();

    const sizeStyle = computed(() => ({
      width: width.value == null ? void 0 : width.value + "px",
      height: height.value == null ? void 0 : height.value + "px",
    }));
    console.log(sizeStyle, "我哦");

    // const mergePreview = computed(
    //   () => !groupContext?.preview && preview.value,
    // );

    const mergePreview = computed(() => preview.value);

    const [mergedPreviewVisible, setPreviewVisible] = useMergeState(
      defaultPreviewVisible.value,
      reactive({
        value: previewVisible,
      }),
    );

    const imageId = Instance.uid;

    watchEffect(() => {
      if (!src.value) return;
      setLoadStatus("loading");
    });

    watchEffect((onInvalidate) => {
      const unRegister = groupContext?.registerImageUrl?.(
        Instance.uid,
        (previewProps?.value?.src ?? src?.value) || "",
        preview.value,
      );
      onInvalidate(() => {
        unRegister?.();
      });
    });

    function onImgLoaded() {
      setLoadStatus("loaded");
    }
    function onImgLoadError() {
      setLoadStatus("error");
    }

    function onImgClick() {
      if (!preview.value) return;
      if (groupContext == null ? void 0 : groupContext.preview) {
        groupContext.preview(imageId);
      } else {
        emit("preview-visible-change", true);
        setPreviewVisible(true);
      }
    }

    function onPreviewClose() {
      emit("preview-visible-change", false);
      setPreviewVisible(false);
    }

    const classNames = computed(() => {
      return [
        prefixCls,
        {
          [`${prefixCls}-loading`]: isLoading.value,
          [`${prefixCls}-loading-error`]: isError.value,
          //   [`${prefixCls}-with-footer-inner`]: isLoaded,
          //   [`${prefixCls}-with-footer-outer`]: isLoaded,
        },
      ];
    });

    return {
      prefixCls,
      classNames,
      visible,
      sizeStyle,
      isLoaded,
      isError,
      isLoading,
      mergePreview,
      mergedPreviewVisible,
      onImgClick,
      onImgLoaded,
      onImgLoadError,
      onPreviewClose,
    };
  },
});
export default Switch;
</script>
